<!--
 * @Description: 
 * @Date: 2020-12-07 10:50:53
 * @LastEditors: lother
 * @LastEditTime: 2021-02-02 17:43:45
 * @FilePath: \VicoAccountOpening-H5\src\views\login\index.vue
-->
<template>
 <div class="login">
    <div class="lang">
      <span @click="langchagne('zh-CN')" :class="lang=='zh-CN'?'on':''">简</span>
      <span @click="langchagne('zh-TW')"  :class="lang=='zh-TW'?'on':''">繁</span>
      <span @click="langchagne('en-US')"  :class="lang=='en-US'?'on':''">EN</span>
    </div>
    <img :src="terminal.terminalLogo" alt="">
    <div class="w89">
         <h2 class="login-title">
           <span v-if="type==1">{{$t('login.index.563650umbok0')}}</span>
           <span v-else-if="type==2">{{$t('login.index.563650umc640')}}</span>
           <span v-else>{{$t('login.index.563650umcjw0')}}</span>
          </h2>
         <loginList v-show="type==1" :type.sync="type"></loginList>
         <register v-show="type==2" :type.sync="type"></register>
         <forgetPsd v-show="type==3" :type.sync="type"></forgetPsd>
    </div>
 </div>
</template>

<script>
import loginList from '@/views/login/login';
import register from '@/views/login/register';
import forgetPsd from '@/views/login/forgetPsd'
import  {removeToken} from '@/utils/auth'
import {about} from '@/api/common'

export default {
  components:{
    register,loginList,forgetPsd
  },
  data() {
    return {
      type:1, //1:登录 2:注册  3:忘记密码
      lang:'',
      terminal:"",
      titleFirst:""
    }
  },
  computed:{
    langSuff(){
        return  this.$store.state.langSuff
    },
  },
  created() {
    document.title = this.titleFirst +'-'+this.$t(this.$route.meta.metaTitle)
    this.lang = (localStorage.getItem('lang')??'zh-CN')
    localStorage.clear()
    localStorage.setItem('lang',this.lang)
    var  links = this.$search()
    this.langchagne(this.lang)
    this.aboutList()
  },
  methods:{
    langchagne(lang){
      this.lang =  lang || this.lang
      localStorage.setItem('lang',lang ?? 'zh-CN')
      localStorage.setItem('langsuff',this.langSwitch(lang))
      this.$store.dispatch('SetHeadpic',this.lang);
      this.$store.dispatch('SetlangSuff',this.langSwitch(lang));
      this.$i18n.locale = this.lang;
      this.$Local(this.lang); 
      document.title = this.titleFirst +'-'+this.$t(this.$route.meta.metaTitle)
    },
    langSwitch(lang){
      lang = lang || 'zh-CN';
      switch (lang) {
        case 'zh-CN':
          return 'zh';
          break;
        case 'en-US':
          return 'en';
          break;
        case 'zh-TW':
          return 'tc';
          break;
        default:
            return 'zh';
          break;
      }
    },
    aboutList(){
      about().then(res=>{
        this.terminal = res.data.terminal;
        localStorage.setItem('common',JSON.stringify(this.terminal))
        this.$Icon(this.terminal.terminalIcon)
        this.titleFirst = this.terminal['terminal_'+this.langSuff]
        document.title = this.titleFirst +'-'+this.$t(this.$route.meta.metaTitle)
      })
    },
  },
};
</script>
<style lang="less" scoped>
  .login{
      padding-top: 1.5rem;
      // min-height: 100vh;
      padding-bottom: 0.3rem;
      .lang{
        position: absolute;
        top: 4%;
        width: 100%;
        text-align: right;
        padding: 0  5.5%;
        span{
          .size;
          padding-left: 0.1rem;
          border-left: 1px solid @borderColor;
        }
        span:first-child{
          padding-right: 0.1rem;
          border: none;
        }
        span:nth-child(2){
          padding-right: 0.1rem;
        }
        span.on{
          color: @btnColor;
        }
      }
      img{
          width:3.22rem;
          // max-height: 0.51rem;
          display: block;
          margin: 0 auto;
      }
      .login-title{
        color:@sizeColor;
        font-size: 0.5rem;
        line-height: 0.5rem;
        padding-top: 2rem;
        font-weight: bold;
      }
      @{deep}.van-cell{
        border: none;
        margin-top: 0;
        background: transparent;
      }
  }
</style>